<template>
	<view class="u-page">
		<!-- <u-skeleton :loading="true" :animate="true"></u-skeleton> -->
		
		<view class="jiluList">
			<view class="list" v-for="(item,index) in dataList" :key="index">
				<view class="wenzi flex flex-align flex-bt">
					<view>状态:</view>
					<view v-if="item.is_pay==1" v-html="item.html" style="font-weight: bold;color: #fff;font-size: 26rpxborder-radius: 10rpx;" ></view>
					<view v-if="item.is_pay==2&&item.payment_status==0"  style="font-weight: bold;color:red" >已失效</view>
					<view v-if="item.is_pay==2&&item.payment_status==1"  style="font-weight: bold;color:green" >支付成功</view>
				</view>
				<view class="wenzi flex flex-align flex-bt">
					<view>订单号:</view><view>{{item.order_no}}</view>
				</view>
				<view class="wenzi flex flex-align flex-bt">
					<view>充值类型:</view><view>{{item.type_name}}</view>
				</view>
				<view class="wenzi flex flex-align flex-bt">
					<view>充值金额:</view><view>{{item.order_amount}}</view>
				</view>
				<view class="wenzi flex flex-align flex-bt">
					<view>创建时间:</view><view>{{item.created_at}}</view>
				</view>
			</view>
			<view class="" v-if="dataList.length==0">
				<u-empty textColor="#999" mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
			</view>
		</view>
		
		<u-datetime-picker @confirm="confirm" @cancel="cancel" @close="close" :show="show"  v-model="value" mode="datetime" ></u-datetime-picker>
		<u-action-sheet :show="disabled1" :actions="walletinfo" title="请选择状态" description="" @close="disabled1 = false" @select="walletSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				payment_type:'',
				identification:'',
				time: new Date(),
				dataList:[],
				show:false,
				dataInfo:'',
				disabled1:false,
				walletinfo:[{id:0,name:'全部'},{id:1,name:'处理中'},{id:2,name:'成功'},{id:3,name:'失败'}],
				status:0,
				start:'',
				end:'',
				type:'',
				value:''
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.page=1
			this.dataList = []
			this.getData()
		},
		onReachBottom() {
			this.page++
			this.getData()
		},
		methods: {
			close() {
				this.show = false
				// console.log('close');
			},
			cancel() {
				this.show = false
			},
			reset(){
				this.start = ''
				this.end = ''
				this.status = 0
				this.page=1
				this.dataList = []
				this.getData()
			},
			getCha(){
				let that = this
				that.page=1
				that.dataList = []
				that.getData()
			},
			confirm(e) {
				this.show = false
				this.result(e.value, e.mode)
			},
			result(time, mode,e) {
				const timeFormat = uni.$u.timeFormat
				if(this.type==1){
					this.start = timeFormat(time, 'yyyy-mm-dd hh:MM')
				}else{
					this.end = timeFormat(time, 'yyyy-mm-dd hh:MM')
				}
			},
			submite(){
				this.show = false
				this.page=1
				this.dataList = []
				this.getData()
			},
			goZhifu(e){
				window.location = e.html
			},
			walletSelect(e){
				this.status = e.id
			},
			getTimes(e){
				this.type = e
				this.show = true
			},
			getData(){
				let that = this
				that.tui.request("auth.recharge/zfbRechargeList", "POST", {page:that.page}, false, false, false).then((res) => {
					if(res.code==1){
						that.dataList = that.dataList.concat(res.data.list)
						that.dataInfo = res.data
					}
				}).catch((res) => {
					
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page{background: #f2f2f2;padding-bottom: 20rpx;}
	.header_fix{position: fixed;top: 0;left: 0;width: 100%;
	/* #ifdef H5 */
	top: 80rpx;
	/* #endif */}
	 .home_header{background:#0cb06b;height: 100rpx;padding: 0 20rpx;
		.btnGreen{background: #FFF;color: #0cb06b;padding:14rpx 0rpx;margin-right: 20rpx;border-radius: 8rpx;font-weight: bold;font-size: 26rpx;min-width: 94rpx;text-align: center;}
	 }
	 .bgWite{padding: 25rpx 30rpx;font-weight: bold;font-size: 26rpx;line-height: 1.6;
		.flex-1{background: #fff;text-align: center;padding: 30rpx 0;margin-right: 20rpx;border-radius: 6rpx;
			text{color: #fb6c72;margin: 0 10rpx;font-size:32rpx}
		}
		.flex-1:last-child{margin-right: 0;}
	 }
	 .popupinfo{
		 .title{font-weight: bold;font-size: 32rpx;margin-bottom: 20rpx;}
		 .shanghu_list{
			 .flex{margin-bottom: 10rpx;
				.left{font-size: 28rpx;}
			 }
		 }
	 }
	 .popup_btn{position: absolute;bottom: 100rpx;left: 0;width: 100%;
		.flex-1{background: #0cb06b;color: #fff;text-align: center;border-radius: 8rpx;margin: 0 10rpx;font-size: 30rpx;padding: 15rpx 0;}
	 }
	 .jiluList{
		 .list{background: #fff;margin:10rpx 20rpx 20rpx;border-radius: 10rpx;padding: 30rpx;line-height: 1.7;}
	 }
	.font30{font-size: 30px;}
</style>